<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .grid {
        margin: auto;
        width: 530px;
        text-align: center;
        }
        .grid table {
        border-top: 1px solid #C2D89A;
        width: 100%;
        border-collapse: collapse;
        }
        .grid th,td {
        padding: 10;
        border: 1px dashed #F3DCAB;
        height: 35px;
        line-height: 35px;
        }
        .grid th {
        background-color: #F3DCAB;
        }
        .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #F3DCAB;
        }
        .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: #F3DCAB;
      border-top: 1px solid #C2D89A;
    }
      </style>
</head>
<body>
    <div id="app">
        <div class="grid">
            <div>
                <h1>图书管理</h1>
                <div class="book">
                  <div>
                    <label for="id">
                      编号：
                    </label>
                    <input type="text" id="id" v-model='id' :disabled='flag' v-focus>
                    <label for="name">
                      名称：
                    </label>
                    <input type="text" id="name" v-model='name'>
                    <button @click='handle' :disabled="submitFlag">提交</button>
                  </div>
                </div>
              </div>
              <div class="total">
                <span>图书总数：</span>
                <span>{{total}}</span>
              </div>
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
                <tr :key='item.id' v-for='item in books'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                    <td>
                        <a href="" @click.prevent='toedit(item.id)'>修改</a>
                        <span>|</span>
                        <a href="" @click.prevent='deleteindex(item.id)'>删除</a>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
      </div>
      <script src="./js/vue.js"></script>
      <script>
           Vue.directive('focus', {
           inserted: function (el) {
           el.focus();
           }
           });
     Vue.filter('format', function(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份 
          "d": date.getDate(), //日 
          "h": date.getHours(), //小时 
          "m": date.getMinutes(), //分 
          "s": date.getSeconds(), //秒 
          "q": Math.floor((date.getMonth() + 3) / 3), //季度 
          "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    })
          var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                flag:false,
                submitFlag: false,
                books: []
            },
            methods:{
                handle(){
                  if(this.flag) {
                        this.books.some( item => {
                            if(this.id === item.id) {
                                item.name = this.name;
                                 return true;
                            }
                        })
                  } else {
                    var book = {}
                   book.id = this.id
                   book.name = this.name
                   book.date = new Date()
                   this.books.push(book)
                  }
                  this.id = ''
                   this.name = ''
                },
                toedit(id) {
                    this.flag = true
                    let news = this.books.filter( item => {
                       return id === item.id
                    })
                    console.log(news);
                    this.id = news[0].id
                    this.name = news[0].name
                },
                deleteindex(id) {
                    // var index = this.books.findIndex( item => {
                    //      return id === item.id
                    // })
                    // this.books.splice(index,1)

                    this.books = this.books.filter( item => {
                        return id !== item.id
                    })
                }
            },
            computed:{
                total(val){
                    return this.books.length
                }
            },
            watch:{
                name(val) {
                   let bookflag =  this.books.some( item => {
                      return  item.name === val
                    })
                    if(bookflag) {
                        this.submitFlag = true
                    } else {
                        this.submitFlag = false
                    }
                }
            },
            created(){
               var data = [
               {
                id: 1,
                name: '三国演义',
                date: new Date()
                },{
                id: 2,
                name: '水浒传',
                date: new Date()
                },{
                id: 3,
                name: '红楼梦',
                date: new Date()
                },{
                id: 4,
                name: '西游记',
                date: new Date()
                }
               ] 
               this.books = data
            }
          })
      </script>
</body>
</html>